import { Tabs, TabsProps } from 'antd';
import React, { useRef, useState } from 'react';

import { Alert } from '@/components/eai-design';
import PagesHeader from '@/components/pages-header';
import TipDesc from '@/components/tipDesc/tipDesc';

import MCPService from './components/MCPService';
import MCPTools from './components/MCPTools';

const index = () => {
  const tabsItems: TabsProps['items'] = [
    {
      key: '1',
      label: <div className="text-sm">第三方MCP工具</div>,
    },
    {
      key: '2',
      label: <div className="text-sm">MCP服务</div>,
    },
  ];

  const [tabsValue, setTabsValue] = useState('1');
  const toolsMessage =
    '支持通过输入第三方 MCP 地址，系统将自动解析其公开的接口能力，并批量生成对应的可调用 MCP 工具。该功能简化了外部集成流程，提升了接入效率，适用于需要快速对接第三方平台服务的使用场景。';
  const serviceMessage =
    '支持用户按需选择部分应用，通过 MCP 协议向外部系统提供服务接口。所选应用将以标准化方式对外开放，实现跨系统的数据访问或能力调用，便于在安全可控的前提下开展集成对接。';
  const MCPToolsRef = useRef(null);

  return (
    <div className="flex h-full w-full flex-col rounded-default ">
      <PagesHeader>
        MCP中心
        <TipDesc title="用于创建和管理第三方MCP或者智能体的MCP" />
      </PagesHeader>
      <div className="flex flex-1 flex-col overflow-auto px-5">
        <Tabs items={tabsItems} activeKey={tabsValue} onChange={(key) => setTabsValue(key)} />
        <Alert
          message={tabsValue === '1' ? toolsMessage : serviceMessage}
          type="info"
          className="!mb-4"
        />
        {tabsValue === '1' ? <MCPTools ref={MCPToolsRef} /> : <MCPService />}
      </div>
    </div>
  );
};

export default index;
